<template>
  <div>
    <el-dialog :model-value="modelValue" title="编辑菜单"
               width="800" @close="close">
      <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-position="top" label-width="auto">
        <el-form-item label="名称" prop="title">
          <el-input v-model="formData.title" placeholder="请输入"  suffix-icon="EditPen" />
        </el-form-item>
        <el-form-item label="路由名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入"  suffix-icon="EditPen" />
        </el-form-item>
        <el-form-item label="路劲" prop="path">
          <el-input v-model="formData.path" placeholder="请输入"  suffix-icon="EditPen" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="formData.icon" placeholder="请输入"  suffix-icon="EditPen" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">{{ "取消" }}</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">{{ "确定" }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { rules } from "./data";
import { ref } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import {UpdateMenus} from "@/api/menus";
const emit = defineEmits(["update:modelValue", "init"]);

const props = defineProps<{
  modelValue: boolean;
  formData:any
}>();
const close = ():void => {
  emit("update:modelValue", false);
  emit("init");
};
const ruleFormRef = ref<FormInstance>();
const submit = async (formEl: FormInstance | undefined): Promise<void> => {
  if (!formEl) return;
  await formEl.validate(async (valid: boolean) => {
    if (valid) {
      const res = await UpdateMenus(props.formData)
      if(res.code == 200){
        ElMessage.success("修改成功")
        close();
      }else{
        ElMessage.error(res.message)
      }
    }
  });
};
</script>
